<template>
    <div class="bg-primary/60 bg-success/60 bg-warning/60 bg-danger/60 bg-info/60 " />
    <div class="h-5 flex items-center rounded text-white" :class="'bg-' + type + '/60'">
        <div class="px-2 text-xs"> {{ name }}</div>
    </div>
</template>

<script setup lang="ts">
defineProps({
    name: { type: String, default: "" },
    type: { type: String, default: "primary" }
})
</script>